<template>
	<view class="content">
		<!-- 个人信息 -->
		<view class="head-box">
			<navigator navigator url="/pages/mine/avatar/index" class="head-img">
				<image :src="avatar" mode=""></image>
			</navigator>
			<navigator url="/pages/mine/info/edit" class="info-box">
				<view class="info-nickname">
					{{ user.nickName }}
				</view>
				<view class="info-phone">
					{{user.phonenumber}}
				</view>
			</navigator>
			<navigator url="/pages/mine/info/index" hover-class="navigator-hover" class="more-info">
				更多信息>
			</navigator>
		</view>
		<!-- 灵感资料 -->
		<view class="smart-data-box">
			<view class="data-title">灵感资料
				<image src="../../static/images/inspiration.png" style="width: 30rpx;height: 30rpx;" mode=""></image></view>
			<view class="data-items">
				<view class="data-item">
					<view class="data-value">125</view>
					<view class="data-key">积分</view>
				</view>
				<view class="data-line"></view>
				<view class="data-item">
					<view class="data-value">26</view>
					<view class="data-key">关注</view>
				</view>
				<view class="data-line"></view>
				<view class="data-item">
					<view class="data-value">35</view>
					<view class="data-key">收藏</view>
				</view>
				<view class="data-line"></view>
				<view class="data-item">
					<view class="data-value">0</view>
					<view class="data-key">创作</view>
				</view> 
			</view>
		</view>
		<!-- 商城订单、消息、活动 -->
		<view class="function-box">
			<view class="function-item">
				<image class="function-icon" src="../../static/images/function/ShopOrder.png" style="width: 45rpx;"></image>
				<view class="function-titl">商城订单</view>
				<uni-icons type="forward" size="25" class="function-jump"></uni-icons>				
			</view>
			<view class="function-item">
				<image class="function-icon" src="../../static/images/function/chart.png" style="padding-left:2.5rpx ;width: 44rpx;"></image>
				<view class="function-titl">消息通知</view>
				<uni-icons type="forward" size="25" class="function-jump"></uni-icons>				
			</view> 
			<view class="function-item">
				<image class="function-icon" src="../../static/images/function/activity.png" style="padding-left:2.5rpx ;width: 44rpx;"></image>
				<view class="function-titl">参与活动</view>
				<uni-icons type="forward" size="25" class="function-jump"></uni-icons>				
			</view>
		</view>
		<!-- 打印订单、地址、打印价格 -->
		<view class="function-box">
			<view class="function-item">
				<image class="function-icon" src="../../static/images/function/printOrder.png" style="width:50rpx;height: 50rpx;"></image>
				<view class="function-titl">打印订单</view>
				<uni-icons type="forward" size="25" class="function-jump"></uni-icons>				
			</view>
			<navigator url="/pages/my/address/index" class="function-item">
				<image class="function-icon" src="../../static/images/function/address.png" style="padding-left: 5rpx ;width: 42rpx;"></image>
				<view class="function-titl">地址管理</view>
				<uni-icons type="forward" size="25" class="function-jump"></uni-icons>				
			</navigator>
			<view class="function-item">
				<image class="function-icon" src="../../static/images/function/price.png" style="padding-left:1rpx ;width: 46rpx;"></image>
				<view class="function-titl">打印价格</view>
				<uni-icons type="forward" size="25" class="function-jump"></uni-icons>				
			</view>
		</view>
		<!-- 订单咨询、建议反馈、商家入驻... -->
		<view class="function-box"> 
				<view class="function-item">
					<image class="function-icon" src="../../static/images/function/join.png" style="padding-left:0rpx ;width: 46rpx;height: 46rpx;"></image>
					<view class="function-titl">加入空间</view>
					<uni-icons type="forward" size="25" class="function-jump"></uni-icons>				
				</view>
			<view class="function-item">
				<image class="function-icon" src="../../static/images/function/enter.png" style="padding-left:2.5rpx ;width: 44rpx;"></image>
				<view class="function-titl">商家免费入驻</view>
				<uni-icons type="forward" size="25" class="function-jump"></uni-icons>				
			</view>
			<view class="function-item">
				<image class="function-icon" src="../../static/images/function/advice.png" style="padding-left:2.5rpx ;width: 44rpx;"></image>
				<view class="function-titl">建议反馈</view>
				<uni-icons type="forward" size="25" class="function-jump"></uni-icons>				
			</view>
			<view class="function-item">
				<image class="function-icon" src="../../static/images/function/about.png" style="padding-left:2.5rpx ;width: 44rpx;"></image>
				<view class="function-titl">关于我们</view>
				<uni-icons type="forward" size="25" class="function-jump"></uni-icons>				
			</view>
		</view>
	</view>
</template>

<script>
  import storage from '@/utils/storage'
  import { getUserProfile } from "@/api/system/user"
	export default {
		data() {
			return {
				userinfo:{
					nickName: '王小龙',
					phone: 'wxl1767100416'
				},
				user: {},
        name: this.$store.state.user.name,
        version: getApp().globalData.config.appInfo.version,
				nickName: this.$store.state.user.nickName,				
			}
		},
    computed: {
      avatar() {
        return this.$store.state.user.avatar
      },
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      }
    },
    onLoad() {
      this.getUser()
    },
		methods:{
			getUser() {
			  getUserProfile().then(response => {
			    this.user = response.data
			    this.roleGroup = response.roleGroup
			    this.postGroup = response.postGroup
			  })
			}
		}
	}
</script>

<style>	
	page {
		background-color: #f5f6f7;
	}
	.content {
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	
		/* 个人信息  */
	.head-box{
		width: 100vw;
		background-color: #0278FF;
		display: flex;
		height: 200rpx;
		align-items: center;
		position: relative;
	}
	.head-img image{
		width: 120rpx;
		height: 120rpx;
		border: white solid 1rpx;
		border-radius: 10rpx;
		margin-left: 40rpx;
	}
	.info-box{
		margin-left: 30rpx;
		height: 105rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		color: white;
		font-size: large;
	}
	.more-info{
		position: absolute;
		right: 50rpx;
		bottom: 50rpx;
		color: white;
	}
	
	/* 灵感资料 */
	.smart-data-box{
		width: 95vw;
		display: flex;
		flex-direction: column; 
		justify-content: center;
		align-items: center;
		margin: 2.5vw 2.5vw 1vw 2.5vw;
		padding: 10rpx;
		background-color: white;
		height: 200rpx;
		position: relative;
		border-radius: 10rpx;
	}
	.data-title{
		position: absolute;
		top:10rpx;
		left: 15rpx;
		line-height: 15rpx;
	}
	.data-items{
		display: flex;
		flex-direction: row; 
		width: 100%;
		justify-content: space-around;
		padding: 20rpx;
		align-items: center;
		margin-top: 30rpx;
	}
	.data-item{
		font-size: larger;
	}
	.data-value,.data-key{
		text-align: center;
	}
	.data-line{
		height: 60rpx;width: 1rpx;
		background-color: #D8D8D8;
	}
	
	/* 打印订单、地址、打印价格 */
	.function-box{
		width: 95vw;
		margin: 1vw 2.5vw;
		padding: 10rpx;
		background-color: white;		
		border-radius: 10rpx;
	}
	.function-item{
		position: relative;
		display: flex;
		align-items: center;
		width: 95vw;
		height: 80rpx;
		padding-left: 25rpx;
		/* margin: 10rpx auto; */
	}
	.function-box .function-icon{
		width: 45rpx; height: 45rpx;
	}
	.function-titl{
		font-size: large;
		line-height: 30rpx;
		margin-left: 10rpx;
	}
	.function-jump{
		position: absolute;
		right: 30rpx;
	}
	
	/* 订单咨询、建议反馈、商家入驻 */
	.function3-box{
		
	}
</style>